<template>
  <div class="tabbar">
    <van-tabbar v-model="active">
      <van-tabbar-item
        :icon="item.meta.icon"
        v-for="item in list"
        :key="item.path"
        :to="item.path"
        :badge="item.name === 'cart' ? $store.state.cart.length : ''"
        >{{ item.meta.title }}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";
import routes from "../router/routes";

Vue.use(Tabbar);
Vue.use(TabbarItem);

export default {
  name: "Tabbar",
  data() {
    return {
      active: 0,
      list: []
    };
  },
  created() {
    this.list = routes.filter(item => item.meta.isNav);
  }
};
</script>

<style lang="scss" scoped></style>
